// Desc: 自定义表格渲染标签
import { h } from 'vue';

import {
  Tag as aTag,
  Switch as aSwitch,
  Input as aInput,
  Checkbox as aCheckbox,
  InputNumber as aInputNumber,
  Select as aSelect,
  SelectProps,
  InputProps,
  InputNumberProps,
  CheckboxProps,
} from 'ant-design-vue';

type CheckedType = boolean | string | number;

interface TagItem {
  color?: string;
  text?: string;
  value?: CheckedType;
}

interface TagOptions {
  value?: CheckedType;
  items?: TagItem[];
}

export function TagRender(tagOption: TagOptions) {
  // 默认配置
  const options: TagOptions = {
    value: 0,
    items: [
      { text: '启用', value: 1, color: 'green' },
      { text: '停用', value: 0, color: 'red' },
    ],
  };

  // 更新用户自定义配置
  Object.assign(options, tagOption);

  let color: string | undefined = '';
  let text: string | undefined = '';
  options.items?.forEach((item) => {
    if (item.value == options.value) {
      color = item.color;
      text = item.text;
    }
  });

  return h(aTag, { color: color }, () => text);
}

// 状态[启用、停用]
export function StatusTagRender(value: CheckedType) {
  return TagRender({
    value,
    items: [
      { text: '启用', value: 1, color: 'green' },
      { text: '停用', value: 0, color: 'red' },
    ],
  });
}

// 是否 Tag
export function WhetherTagRender(value: CheckedType) {
  return TagRender({
    value,
    items: [
      { text: '是', value: 1, color: 'green' },
      { text: '否', value: 0, color: 'red' },
    ],
  });
}

// 是否 Tag
export function DeletedTagRender(value: CheckedType) {
  return TagRender({
    value,
    items: [
      { text: '是', value: 1, color: 'red' },
      { text: '否', value: 0, color: 'green' },
    ],
  });
}

interface SwitchOptions {
  value?: CheckedType;
  checkedText?: string;
  checkedValue?: CheckedType;
  uncheckedText?: string;
  uncheckedValue?: CheckedType;
  onchange?: (checked: CheckedType) => void;
}

export function SwitchRender(switchOptions: SwitchOptions) {
  // 默认配置
  const options: SwitchOptions = {
    value: 0,
    checkedText: '启用',
    checkedValue: 1,
    uncheckedText: '停用',
    uncheckedValue: 0,
  };

  // 更新用户自定义配置
  Object.assign(options, switchOptions);

  return h(aSwitch, {
    checked: options.value == options.checkedValue,
    checkedChildren: options.checkedText,
    unCheckedChildren: options.uncheckedText,
    onChange: options.onchange,
  });
}

export function SelectRender(record, column, opt?: SelectProps) {
  const newOptions: SelectProps = {
    size: 'small',
    onSelect: (value) => {
      record[column.dataIndex] = value;
    },
    style: {
      width: '100%',
    },
  };

  Object.assign(newOptions, opt);

  return h(aSelect, newOptions);
}
export function InputRender(record, column, value, opt?: InputProps) {
  const newOptions: InputProps = {
    size: 'small',
    onChange: (val) => {
      record[column.dataIndex] = val;
    },
    defaultValue: value,
  };

  Object.assign(newOptions, opt);

  return h(aInput, newOptions);
}

export function InputNumberRender(record, column, opt?: InputNumberProps) {
  const newOptions: InputNumberProps = {
    size: 'small',
    onChange: (value) => {
      record[column.dataIndex] = value;
    },
  };

  Object.assign(newOptions, opt);

  return h(aInputNumber, newOptions);
}

export function CheckboxRender(record, column, value, opt?: CheckboxProps) {
  const newOptions: CheckboxProps = {
    onChange: (val) => {
      value;
    },
    value: value,
    checked: value,
    prefixCls: 'rd',
  };

  Object.assign(newOptions, opt);

  return h(aCheckbox, newOptions);
}
